<template>
  <div>
    <!-- <NavBar></NavBar> -->
    <!-- 自定义 -->
    <div class="nabbar">
      <div class="one">
        <img src="../../assets/static/images/fanhuijiantou.png" alt="">
      </div>
      <div class="two">
        {{$store.state.startCity}}
       <img src="../../assets/static/images/置换.png" alt="">
       {{$store.state.endCity}}
      </div>
    
       <div class="three">
        <p></p>
       </div>
      </div>
   
    <div class="calaender">
      <ul>
        <li @click="front">前一天</li>
        <li>
          <div>
            {{$store.state.month}}月{{$store.state.date}}日<span>周{{$store.state.week}}</span>
          </div>
        </li>
        <li @click="retreat">后一天</li>
      </ul>
    </div>

    <div v-if="ticketList==''">
      <div class="aaa">
        <h1>很抱歉，按您的查询条件，当前未找到从{{this.$store.state.startCity}}到{{this.$store.state.endCity}}的列车，您可以查询其他时间段的列车。</h1>
        <img src="../../assets/static/images/train.jpg">

      </div>
    </div>
    <!-- 组件传值  父子关系传值   在父组件绑定属性v-bind  在子组件用props接受数据 -->
    <Trainlist :tranlist="ticketList">
      <template #seat="{priclist}">
        <div class="seat">
          <p v-for="(seat,index) in priclist"
             :key="index">
            {{seat.price_type}}:{{isPrice?$options.filters.num(seat.num):$options.filters.price(seat.price)}}
          </p>
        </div>
      </template>
    </Trainlist>
    <!-- tabBar -->
    <div class="tabBar">
      <ul>
        <li @click="isShow=true"
            :class="{'active':isSelect=='筛选'}">
          <i class="iconfont icon-shaixuan"></i>
          <p>筛选</p>
        </li>
        <li @click="speedTime"
            :class="{'active':isSelect=='耗时最短'}">
          <i class="iconfont  icon-underway"></i>
          <p>耗时最短</p>
        </li>
        <li @click="trainTime"
            :class="{'active':isSelect=='发车最早'}">
          <i class="iconfont  icon-weibiaoti-"></i>
          <p>发车最早</p>
        </li>
        <li @click="ticketPrice"
            :class="{'active':isSelect=='所需票价'}">
          <i class="iconfont  icon-piaoju"></i>
          <p>所需票价</p>
        </li>
      </ul>
    </div>
    <!-- 提示框 -->
    <transition name="fade">
      <div class="mask"
           v-show="isShow"></div>
    </transition>
    <transition name="slide">
      <div v-show="isShow"
           class="promptBox">
        <div class="reset"
             @click="reset"><span>重置</span><span @click="isShow=false">关闭</span></div>
        <div class="conter">
          <dl class="clearfix">
            <dt>车次类型</dt>
            <dd :class="{'hsr':busindex.includes(bus)}"
                v-for="(bus,index) in busType"
                :key="index"
                @click="getBusType(bus)">{{bus}}</dd>
          </dl>
          <dl class="clearfix">
            <dt class="startion">初始车站</dt>
            <dd>菏泽</dd>
            <dd>菏泽东</dd>
          </dl>
        </div>
        <button @click.prevent="filterbtn">确定</button>
      </div>
    </transition>
  </div>
</template>
<script>
// 组件导入
import Trainlist from '../../components/Trainlist/Trainlist.vue';
import { mapActions } from 'vuex';
export default {
  name: 'HopuTrain',
  data() {
    return {
      isShow: false,
      isSelect: '发车最早',
      busType: ['高铁', '普通', '只看有票'],
      busindex: [],
      isPrice: true,
    };
  },
  computed: {
    newTime: {
      get() {
        return this.$store.state.newTime;
      },
      set(v) {
        return (this.$store.state.newTime = v);
      },
    },
    ticketList: {
      get() {
        return this.$store.state.ticketList;
      },
      set(v) {
        return (this.$store.state.ticketList = v);
      },
    },
  },
  // 注册组件
  components: {
 
    Trainlist,
  },
  // 监听到日期变化，把变化后的值给请求参数里的date，并且发起请求
  watch: {
    newTime(newvalue) {
      // this.$store.state.ticketParams.data=  newvalue;
      // dom更新后数据及时更新 用next
      this.$store.state.ticketParams.date = newvalue;
      this.$store.dispatch('actionApi');
    },
  },
  methods: {
    ...mapActions(['retreat', 'front']),
    reset() {
      // 清空存放点击后的数组   相对应得class也是有存放数据的内容决定的  同样也不会显示class
      this.busindex = [];
    },
    getBusType(bus) {
      // console.log(bus);
      if (this.busindex.includes(bus)) {
        // 保证没有当前值  并且还是数组结构  循环
        this.busindex = this.busindex.filter(item => {
          return item != bus;
        });
      } else {
        this.busindex.push(bus);
      }
      // slice() 方法特殊用法，在没有任何参数的时候是作为数组的浅拷贝
      this.$store.state.result = this.busindex.slice();
    },
    filterbtn() {
      this.isShow = false;
      this.$store.dispatch('getFilterBtn');
      this.isSelect = '筛选';
    },
    speedTime() {
      this.$store.state.ticketList.sort((a, b) => {
        return a.run_time.replace(/\D/g, '') - b.run_time.replace(/\D/g, '');
      });
      var run_time = '4小时53分';
      // console.log(run_time.replace(/\D/g, ''));
      this.isSelect = '耗时最短';
    },
    trainTime() {
      this.$store.state.ticketList.sort((a, b) => {
        return a.start_time > b.start_time ? 1 : -1;
      });
      this.isSelect = '发车最早';
    },
    ticketPrice() {
      this.isPrice = !this.isPrice;
      this.isSelect = '所需票价';
    },
  },
  mounted() {},
  created() {
    this.$http.get('/api/get/swiper').then(res => {
      // console.log(res.data.swiper);
      //把请求到的数据  赋值给   swiperList
      this.swiperList = res.data.swiper;
    });
    this.$store.dispatch('ticketParams', {
      start: this.$store.state.startCity,
      end: this.$store.state.endCity,
      date: this.$store.state.newTime,
    });
    this.$store.dispatch('actionApi');
    this.$store.dispatch('getFilterBtn');
    // console.log(new Date(2022, 0, 0));
    // 获取当月最后一天的值
    // console.log(
    //   new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
    // );
  },
};
</script>

<style lang='less' scoped>
 .aaa {
    width: 100%;
    height: 100%;
    margin: 0px auto;
    text-align: center;

    h1 {
      margin-top: 200px;
      padding: 10px;
      text-align: center;
      color: #c0c0c0;
    }
    img{
      width: 70%;
      height: 70%;
    }
  }
.nabbar{
background-color: #1989fa;
color: white;
height: 44px;
width: 100%;
display: flex;
justify-content: space-between;
line-height: 44px;
padding: 0px 20px;
.one{
  img{
    width: 20px;
    background: #fff;
    height: 20px;
  }
}
.two{
  img{
    width: 15px;
    height: 15px;
  }
}

}
.slide-enter-active,
.slide-enter-active {
  transition: all 1s;
  transform: translateY(0%);
}
.slide-enter,
.slide-leave-to {
  transform: translateY(100%);
  bottom: -200px;
}
.fade-enter-active,
.fade-enter-active {
  transition: all 1s;
  opacity: 1;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.calaender {
  background-color: #1989fa;
  height: 44px;
  color: white;
  // margin-top: -1px;
  ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    li {
      width: 33%;
      text-align: center;
      div {
        width: 100%;
        color: #1989fa;
        background-color: white;
        border-radius: 8px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        text-align: center;
        padding: 0px 10px;
        span {
          padding-left: 5px;
        }
        i {
          padding-left: 5px;
        }
      }
    }
  }
}

.tabBar {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: white;
  height: 49px;
  width: 100%;
  margin: 0px auto;
  font-size: 10px;
  ul {
    display: flex;
    justify-content: space-evenly;
    margin-left: 10px;
    li {
      text-align: center;
      float: left;
      padding: 0px 20px;
      margin: 0px auto;
      &.active {
        color: #1989fa;
      }
    }
  }
  .iconfont {
    font-size: 20px;
  }
}
.promptBox {
  z-index: 9999;
  height: 280px;
  background-color: white;
  position: fixed;
  bottom: 0;
  margin: 0px auto;
  width: 100%;
  text-align: center;
  transition: all 1s;
  .reset {
    width: 100%;
    height: 44px;
    background-color: #3c3b4b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    span {
      color: white;
    }
  }
  .conter {
    padding: 16px;
    dl {
      margin-bottom: 16px;
      dt {
        font-size: 12px;
        color: #999;
      }
      dd {
        padding: 6px 16px;
        background: #f3f3f3;
        color: #000;
        float: left;
        border-radius: 5px;
        margin-right: 20px;
        margin-top: 10px;
      }
      .hsr {
        border: 1px solid #1989fa;
        color: #1989fa;
      }
    }
  }
  button {
    width: 90%;
    height: 44px;
    border: 1px solid #1989fa;
    color: #1989fa;
    border-radius: 10px;
    text-align: center;
    background: none;
    margin: 0px auto;
    display: block;
    margin-bottom: 10px;
  }
}
.seat {
  margin-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  p {
    width: 33%;
    color: #999;
  }
}
</style>